<template>
    <van-cell-group inset>
      <van-cell
        v-for="(item, index) in items"
        :key="index"
        :title="item.title"
        :value="item.status"
        :label="item.time"
        is-link
        @click="$emit('item-click', item)"
      >
        <template #icon>
          <van-badge :content="item.count" v-if="item.count > 0">
            <van-icon :name="item.icon" class="icon" />
          </van-badge>
          <van-icon v-else :name="item.icon" class="icon" />
        </template>
      </van-cell>
    </van-cell-group>
  </template>
  
  <script setup>
  defineProps({
    items: {
      type: Array,
      required: true,
      validator: value => value.every(item => 
        item.title && 
        item.status && 
        item.icon &&
        item.path
      )
    }
  })
  
  defineEmits(['item-click'])
  </script>
  
  <style lang="scss" scoped>
  .van-cell {
    align-items: center;
  
    :deep(.van-cell__icon) {
      margin-right: 12px;
      
      .icon {
        font-size: 20px;
        color: var(--van-primary-color);
      }
  
      .van-badge__wrapper {
        display: flex;
        align-items: center;
      }
    }
  
    :deep(.van-cell__label) {
      margin-top: 4px;
      font-size: 12px;
      color: var(--van-gray-6);
    }
  }
  </style>